<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格样式测试</title>


        <style>
            nav{
                margin-top: 10px;
                text-align: center;
            }

            nav a{
                margin-right: 20px;
            }

            table {
                margin: 100px auto;
                border-collapse: collapse;
            }

            .opt {
                color: #5b73ff;
                margin-right: 5px;
            }

            .red {
                color: #ff0000;
            }
        </style>



    </head>

    <script>
        const url = new URL(window.location);
        const params = url.searchParams;
        const num = params.get("num")

        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = "./styles/style" + num + ".css";
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    </script>

    <body>

        <nav>
            <a href="./table-style-test.html?num=0">简陋</a>
            <a href="./table-style-test.html?num=1">网上的</a>
            <a href="./table-style-test.html?num=2">营销云</a>
            <a href="./table-style-test.html?num=3">Element-UI</a>
            <a href="./table-style-test.html?num=4">antd</a>
            <a href="./table-style-test.html?num=5">easyui</a>
            <a href="./table-style-test.html?num=6">vuetify</a>
            <a href="./table-style-test.html?num=7">医睦</a>
        </nav>

        <table>
            <colgroup>
                <col width="80" />
                <col width="100" />
                <col width="100" />
                <col width="100" />
                <col width="100" />
                <col width="300" />
                <col width="200" />
                <col width="100" />
                <col width="180" />
            </colgroup>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>描述</th>
                    <th>创建时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>研发</td>
                <td>描述</td>
                <td>2019-12-10 08:12:32</td>
                <td>停用</td>
                <td>
                    <span class="opt">详情</span>
                    <span class="opt">编辑</span>
                    <span class="opt red">删除</span>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>21</td>
                <td>男</td>
                <td>测试</td>
                <td>描述22222</td>
                <td>2020-10-20 05:22:05</td>
                <td>启用</td>
                <td>
                    <span class="opt">详情</span>
                    <span class="opt">编辑</span>
                    <span class="opt red">删除</span>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>21</td>
                <td>男</td>
                <td>测试</td>
                <td>描述222226666描述222226666</td>
                <td>2020-10-20 05:22:05</td>
                <td>启用</td>
                <td>
                    <span class="opt">详情</span>
                    <span class="opt">编辑</span>
                    <span class="opt red">删除</span>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>李四</td>
                <td>21</td>
                <td>男</td>
                <td>测试</td>
                <td>描述22222</td>
                <td>2020-10-20 05:22:05</td>
                <td>启用</td>
                <td>
                    <span class="opt">详情</span>
                    <span class="opt">编辑</span>
                    <span class="opt red">删除</span>
                </td>
            </tr>
        </table>
    </body>
</html>


